<template>
  <div class="lecture-container">
    <h3>健康讲堂资源</h3>
    <el-card v-for="item in lectureList" :key="item.id" class="lecture-item">
      <div><b>{{ item.title }}</b></div>
      <div>{{ item.content }}</div>
      <el-button type="primary" @click="register(item.id)" v-if="!item.registered">报名</el-button>
      <el-tag v-else>已报名</el-tag>
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getLectureListApi, registerLectureApi } from '../api/lecture'
const lectureList = ref([])
const register = async (id) => {
  await registerLectureApi(id)
  loadLectures()
}
const loadLectures = async () => {
  lectureList.value = await getLectureListApi()
}
onMounted(loadLectures)
</script>
<style scoped>
.lecture-container { max-width: 420px; margin: 0 auto; padding: 16px; }
.lecture-item { margin-bottom: 12px; }
</style> 